<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>网图大数据数据墙</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/echarts.common.min.js"></script>
  <script src="js/script.js"></script>
</head>

<body>

  <div class="slide-one">
    <div class="siderbar-left">
      <!-- 总馆藏资源 -->
      <div class="collection-counts">
        <div class="wrapper-left">
          <h2>总馆藏资源</h2>
          <p><span>12345</span>册</p>
          <p><span>1234</span>种</p>
        </div>
      </div>
      <!-- 最受欢迎的图书 -->
      <div class="favorite-books">
        <div class="wrapper-left">
          <h2>最受欢迎的图书</h2>
          <div class="favorite-list">
            <ul class="top3">
              <li>
                <span>1</span>
                <p><img src="img/book01.jpg" alt="book"></p>
                <p>题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名</p>
                <p>著者：人民邮电出版社邮电出版社邮电出版社邮电出版社</p>
                <p>30次</p>
              </li>
              <li>
                <span>2</span>
                <p><img src="img/book02.jpg" alt="book"></p>
                <p>题名题名题名</p>
                <p>著者：人民邮电出版社</p>
                <p>30次</p>
              </li>
              <li>
                <span>3</span>
                <p><img src="img/book03.jpg" alt="book"></p>
                <p>题名题名题名</p>
                <p>著者：人民邮电出版社</p>
                <p>30次</p>
              </li>
            </ul>
            <ul class="top10">
              <li>
                <p><span>4.</span><span>题名题名题名题名题名题名</span></p>
                <p>10次</p>
              </li>
              <li>
                <p><span>5.</span><span>题名题名题名题名题名题名</span></p>
                <p>10次</p>
              </li>
              <li>
                <p><span>6.</span><span>题名题名题名题</span></p>
                <p>10次</p>
              </li>
              <li>
                <p><span>7.</span><span>题名题名题名</span></p>
                <p>999999次</p>
              </li>
              <li>
                <p><span>8.</span><span>题名题名题名</span></p>
                <p>10次</p>
              </li>
              <li>
                <p><span>9.</span><span>题名题名题名</span></p>
                <p>10次</p>
              </li>
              <li>
                <p><span>10.</span><span>题名题名题名</span></p>
                <p>10次</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 22大类总借书量 -->
      <div class="er2borrowed-counts">
        <div class="wrapper-left">
          <h2>22 大类总借书量</h2>
          <div id="graph2"></div>
        </div>
      </div>

    </div>
    <div class="main">
      <h1>北京华夏中学</h1>

      <!-- 总到馆人数 -->
      <div class="arrived-counts">
        <div class="wrapper-center">
          <h2>总到馆人数</h2>
          <div class="arrived-counts-group">
            <span>9</span>
            <span>8</span>
            <span>7</span>
            <span>6</span>
            <span>5</span>
            <span>4</span>
            <span>3</span>
            <span>2</span>
            <span>1</span>
          </div>
        </div>
      </div>

      <!-- 今进出馆 -->
      <div class="today-arrived-counts">
        <div class="wrapper-center">
          <h2>今日进出馆</h2>
          <div id="graph1"></div>
        </div>
      </div>

      <!-- 借还书统计 -->
      <div class="borrowed-returned-counts">
        <div class="wrapper-center">
          <div class="borrowed-year-counts">
            <h2>今年借书</h2>
            <p>123456</p>
          </div>
          <div class="returned-year-counts">
            <h2>今年还书</h2>
            <p>123456</p>
          </div>
          <div class="borrowed-returned-all">
            <h2>总借书：<span>1234567890</span></h2>
            <h2>总还书：<span>1234567890</span></h2>
          </div>
        </div>
      </div>
    </div>
    <div class="siderbar-right">
      <!-- 在馆读者数量 -->
      <div class="inlib-counts">
        <div class="wrapper-right">
          <h2>您是今日第</h2>
          <p>1234</p>
          <h3>位到馆的读者</h3>
        </div>
      </div>

      <!-- 办证读者数 -->
      <div class="reader-counts">
        <div class="wrapper-right">
          <div class="all-reader-counts">
            <h2>读者总人数</h2>
            <p>99999</p>
            <h3>读者类别占比</h3>

          </div>
          <div id="graph3"></div>
        </div>
      </div>

      <!-- 微信关注量 -->
      <div class="weichat-counts">
        <div class="wrapper-right">
          <h2>微信关注量</h2>
          <div class="weichat-frame">
            <div class="weichat-all-increase">
              <h3>总关注量</h3>
              <p>1234</p>
              <h3>今日新增<span>99</span></h3>
            </div>
            <img src="img/weixin.png" alt="weixin">
            <img src="img/erweima.jpg" alt="erweima">
          </div>
        </div>
      </div>
    </div>

    <!-- 人脸 -->
    <div class="face-display">
      <img src="img/K161053.jpg.jpg" alt="photo">
      <span>读者姓名</span>
    </div>

    <!-- 背景动画 -->
    <div class="chilun1">
      <img src="img/chilun.png" alt="chilun">
    </div>
    <div class="chilun2">
      <img src="img/chilun.png" alt="chilun">
    </div>
    <div class="guangquan">
      <img src="img/ani-circle.png" alt="guangquan">
    </div>
    <div class="light">
      <img src="img/ani-light.png" alt="light">
    </div>
  </div>
</body>
</html>